<template>
    <div>
      <div class="common-seach-wrap fr">
        <el-form
          size="small"
          :inline="true"
          :model="listpage"
          class="demo-form-inline"
        >
          <el-form-item>
            <el-button type="primary" icon="el-icon-download" @click="outputVideo"
              >导出视频链接</el-button
            >
          </el-form-item>
          <el-form-item>
            <el-button type="danger" icon="el-icon-delete" @click="videoListDel"
              >批量删除</el-button
            >
          </el-form-item>
          <el-form-item label="">
            <el-input
              v-model="listpage.keyword"
              placeholder="请输入搜索字"
            ></el-input>
          </el-form-item>
  
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="onSubmit"
              >查询</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <!-- <el-input class="jj" style="width: 100px;"></el-input
      ><el-button class="">查询</el-button> -->
      <el-table
        :data="tablelist"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="action_name" label="活动名称"></el-table-column>
        <el-table-column prop="video_name" label="视频名称"></el-table-column>
        <el-table-column prop="remark" label="预览视频">
          <template slot-scope="scope">
            <video
              :src="scope.row.video"
              controls="controls"
              :autoplay="false"
              style="
                width: 100%;
                height: 200px;
                outline: none;
                margin-right: 100px;
              "
            ></video>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="ip" label="视频封面"> </el-table-column> -->
        <!-- <el-table-column prop="shop_user.real_name" label="上传类型"> -->
        <!-- </el-table-column> -->
        <el-table-column prop="num" label="转发短文">
          <!-- <template slot-scope="scope">
            <span v-if="scope.row.status == 1">已付款</span>
            <span v-else>未付款</span>
          </template> -->
        </el-table-column>
        <el-table-column prop="task_id" label="media" width="300px">
        </el-table-column>
        <el-table-column prop="create_time" label="创建时间"></el-table-column>
        <el-table-column label="状态" width="100px">
          <template slot-scope="scope">
            <span v-if="scope.row.status == 1">投放中</span>
            <span v-else>即将删除</span>
          </template>
        </el-table-column>
        <el-table-column label="审核状况" width="100px">
          <template slot-scope="scope">
            <span v-if="scope.row.check_status == 1">成功</span>
            <span v-if="scope.row.check_status == 0">审核中</span>
            <span v-if="scope.row.check_status == -1">失败</span>
          </template>
        </el-table-column>
        <el-table-column prop="create_time" label="操作">
          <template slot-scope="scope">
            <el-button type="danger" size="mini" @click="abandon(scope.row.id)"
              >删除</el-button
            >
            <template v-if="scope.row.type==1">
              <el-button
                type="danger"
                size="mini"
                @click="show_msg(scope.row.task_id)"
              >合成结果</el-button
              >
            </template>
            <el-button
              type="success"
              size="mini"
              @click="check(scope.row.id,1)"  v-if="scope.row.check_status==0"
            >同意</el-button>
            <el-button
              type="primary"
              size="mini"
              @click="check(scope.row.id,-1)"  v-if="scope.row.check_status==0"
            >拒绝</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="listpage.page"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="listpage.per_page"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
      <!-- 新增活动对话框********************************************************** -->
      <el-dialog title="新增大转盘" :visible.sync="adddialogVisible" width="50%">
        <!-- 新增表单 -->
        <el-form
          ref="form"
          :model="addform"
          label-width="100px"
          :rules="addrules"
        >
          <!-- 大转盘的基本配置 -->
          <div class="form-box">
            <div class="form-box-item1">
              <div class="top">
                <div class="top-item1">大转盘的基本配置</div>
                <div class="top-item2"></div>
              </div>
              <div class="bottom">
                <el-form-item label="选择商户">
                  <el-select v-model="addform.merchant_id" placeholder="请选择">
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="转盘名称">
                  <el-input
                    v-model="addform.turntable_name"
                    placeholder="转盘全称 例：寿司抽奖活动"
                  ></el-input>
                </el-form-item>
                <el-form-item label="活动规则">
                  <el-input
                    type="textarea"
                    :autosize="{ minRows: 2, maxRows: 10 }"
                    v-model="addform.action_introduce"
                    placeholder="活动规则 例:全场消费满200元,并参与抽奖活动!(非必填)"
                  ></el-input>
                </el-form-item>
                <el-form-item label="核销密码">
                  <el-input
                    v-model="addform.write_off_pwd"
                    placeholder="核销密码 例:1234 (不用设置太复杂)"
                  ></el-input>
                </el-form-item>
                <el-form-item label="单人总限抽：">
                  <el-input
                    v-model="addform.limit"
                    placeholder="单人限抽数量 例: 1"
                  ></el-input>
                </el-form-item>
                <el-form-item label="单人每天限抽：">
                  <el-input
                    v-model="addform.day_limit"
                    placeholder="单人限抽数量 例: 1"
                  ></el-input>
                </el-form-item>
                <el-form-item label="结束日期">
                  <el-date-picker
                    v-model="addform.end_time"
                    value-format="yyyy-MM-dd"
                    format="yyyy-MM-dd"
                    style="width: 80%"
                    type="date"
                    placeholder="选择日期"
                  >
                  </el-date-picker>
                </el-form-item>
              </div>
            </div>
            <!-- ********************************************************奖品1配置 -->
            <div class="form-box-item1">
              <div class="top">
                <div class="top-item1">奖品1配置</div>
                <div class="top-item2"></div>
              </div>
              <div class="bottom">
                <div style="display: flex; justify-content: space-around">
                  <el-form-item label="奖品名称">
                    <el-input
                      v-model="addform.detail[0].name"
                      placeholder="烤鱼"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="中奖率">
                    <el-input-number
                      v-model="addform.detail[0].ratio"
                      controls-position="right"
                      @change="handleChangesss"
                      :min="1"
                      :max="100"
                    ></el-input-number>
                  </el-form-item>
                  <el-form-item label="是否中奖">
                    <el-select
                      v-model="addform.detail[0].is_win"
                      placeholder="请选择"
                    >
                      <el-option
                        v-for="item in options2"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </div>
                <div>
                  <el-form-item label="奖品logo">
                    <el-row>
                      <el-button type="primary" @click="openUpload(1)"
                        >选择图片
                      </el-button>
                      <div v-if="this.addform.detail[0].image" class="img">
                        <img
                          :src="addform.detail[0].image"
                          width="100"
                          height="100"
                        />
                      </div>
                    </el-row>
                  </el-form-item>
                </div>
              </div>
            </div>
            <!-- ********************************************************奖品2配置 -->
            <div class="form-box-item1">
              <div class="top">
                <div class="top-item1">奖品2配置</div>
                <div class="top-item2"></div>
              </div>
              <div class="bottom">
                <div style="display: flex; justify-content: space-around">
                  <el-form-item label="奖品名称">
                    <el-input
                      v-model="addform.detail[1].name"
                      placeholder="烤鱼"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="中奖率">
                    <el-input-number
                      v-model="addform.detail[1].ratio"
                      controls-position="right"
                      @change="handleChangesss"
                      :min="1"
                      :max="100"
                    ></el-input-number>
                  </el-form-item>
                  <el-form-item label="是否中奖">
                    <el-select
                      v-model="addform.detail[1].is_win"
                      placeholder="请选择"
                    >
                      <el-option
                        v-for="item in options2"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </div>
                <div>
                  <el-form-item label="奖品logo">
                    <el-row>
                      <el-button type="primary" @click="openUpload(2)"
                        >选择图片
                      </el-button>
                      <div v-if="this.addform.detail[1].image" class="img">
                        <img
                          :src="this.addform.detail[1].image"
                          width="100"
                          height="100"
                        />
                      </div>
                    </el-row>
                  </el-form-item>
                </div>
              </div>
            </div>
            <!-- ********************************************************奖品3配置 -->
            <div class="form-box-item1">
              <div class="top">
                <div class="top-item1">奖品3配置</div>
                <div class="top-item2"></div>
              </div>
              <div class="bottom">
                <div style="display: flex; justify-content: space-around">
                  <el-form-item label="奖品名称">
                    <el-input
                      v-model="addform.detail[2].name"
                      placeholder="烤鱼"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="中奖率">
                    <el-input-number
                      v-model="addform.detail[2].ratio"
                      controls-position="right"
                      @change="handleChangesss"
                      :min="1"
                      :max="100"
                    ></el-input-number>
                  </el-form-item>
                  <el-form-item label="是否中奖">
                    <el-select
                      v-model="addform.detail[2].is_win"
                      placeholder="请选择"
                    >
                      <el-option
                        v-for="item in options2"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </div>
                <div>
                  <el-form-item label="奖品logo">
                    <el-row>
                      <el-button type="primary" @click="openUpload(3)"
                        >选择图片
                      </el-button>
                      <div v-if="this.addform.detail[2].image" class="img">
                        <img
                          :src="this.addform.detail[2].image"
                          width="100"
                          height="100"
                        />
                      </div>
                    </el-row>
                  </el-form-item>
                </div>
              </div>
            </div>
            <!-- ********************************************************奖品4配置 -->
            <div class="form-box-item1">
              <div class="top">
                <div class="top-item1">奖品4配置</div>
                <div class="top-item2"></div>
              </div>
              <div class="bottom">
                <div style="display: flex; justify-content: space-around">
                  <el-form-item label="奖品名称">
                    <el-input
                      v-model="addform.detail[3].name"
                      placeholder="烤鱼"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="中奖率">
                    <el-input-number
                      v-model="addform.detail[3].ratio"
                      controls-position="right"
                      @change="handleChangesss"
                      :min="1"
                      :max="100"
                    ></el-input-number>
                  </el-form-item>
                  <el-form-item label="是否中奖">
                    <el-select
                      v-model="addform.detail[3].is_win"
                      placeholder="请选择"
                    >
                      <el-option
                        v-for="item in options2"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </div>
                <div>
                  <el-form-item label="奖品logo">
                    <el-row>
                      <el-button type="primary" @click="openUpload(4)"
                        >选择图片
                      </el-button>
                      <div v-if="this.addform.detail[3].image" class="img">
                        <img
                          :src="this.addform.detail[3].image"
                          width="100"
                          height="100"
                        />
                      </div>
                    </el-row>
                  </el-form-item>
                </div>
              </div>
            </div>
            <!-- ********************************************************奖品5配置 -->
            <div class="form-box-item1">
              <div class="top">
                <div class="top-item1">奖品5配置</div>
                <div class="top-item2"></div>
              </div>
              <div class="bottom">
                <div style="display: flex; justify-content: space-around">
                  <el-form-item label="奖品名称">
                    <el-input
                      v-model="addform.detail[4].name"
                      placeholder="烤鱼"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="中奖率">
                    <el-input-number
                      v-model="addform.detail[4].ratio"
                      controls-position="right"
                      @change="handleChangesss"
                      :min="1"
                      :max="100"
                    ></el-input-number>
                  </el-form-item>
                  <el-form-item label="是否中奖">
                    <el-select
                      v-model="addform.detail[2].is_win"
                      placeholder="请选择"
                    >
                      <el-option
                        v-for="item in options2"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </div>
                <div>
                  <el-form-item label="奖品logo">
                    <el-row>
                      <el-button type="primary" @click="openUpload(5)"
                        >选择图片
                      </el-button>
                      <div v-if="this.addform.detail[4].image" class="img">
                        <img
                          :src="this.addform.detail[4].image"
                          width="100"
                          height="100"
                        />
                      </div>
                    </el-row>
                  </el-form-item>
                </div>
              </div>
            </div>
            <!-- ********************************************************奖品6配置 -->
            <div class="form-box-item1">
              <div class="top">
                <div class="top-item1">奖品6配置</div>
                <div class="top-item2"></div>
              </div>
              <div class="bottom">
                <div style="display: flex; justify-content: space-around">
                  <el-form-item label="奖品名称">
                    <el-input
                      v-model="addform.detail[5].name"
                      placeholder="烤鱼"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="中奖率">
                    <el-input-number
                      v-model="addform.detail[5].ratio"
                      controls-position="right"
                      @change="handleChangesss"
                      :min="1"
                      :max="100"
                    ></el-input-number>
                  </el-form-item>
                  <el-form-item label="是否中奖">
                    <el-select
                      v-model="addform.detail[5].is_win"
                      placeholder="请选择"
                    >
                      <el-option
                        v-for="item in options2"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </div>
                <div>
                  <el-form-item label="奖品logo">
                    <el-row>
                      <el-button type="primary" @click="openUpload(6)"
                        >选择图片
                      </el-button>
                      <div v-if="this.addform.detail[5].image" class="img">
                        <img
                          :src="this.addform.detail[5].image"
                          width="100"
                          height="100"
                        />
                      </div>
                    </el-row>
                  </el-form-item>
                </div>
              </div>
            </div>
          </div>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="onSubmit">立即创建</el-button>
        </span>
      </el-dialog>
      <el-dialog title="活动二维码" :visible.sync="dialogVisible" width="30%">
        <el-form>
          <el-form-item label="犇犇支付">
            <img
              style="width: 100px; height: 100px"
              src="/static/imgs/code.png"
              alt=""
            />
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="adddialogVisible = false"
            >确 定</el-button
          >
        </span>
      </el-dialog>
      <!--上传图片组件-->
      <Upload
        v-if="isupload"
        :isupload="isupload"
        :type="type"
        @returnImgs="returnImgsFunc"
        >上传图片
      </Upload>
    </div>
  </template>
  
  <script>
  // import request from "@/utils/request";
  // import Upload from "@/components/file/Upload";
  // import {_post} from "../../../utils/request";
  
  export default {
    components: {
     
    },
  
    data() {
      return {
        id: "",
        ischange: false,
        type: "",
        /*是否上传图片*/
        isupload: false,
        imgtype: "",
        //  搜索词
        keyword: "",
  
        options: [
          {
            value: "1",
            label: "宁波天钧伯爵科技有限公司"
          }
        ],
        options2: [
          {
            value: "1",
            label: "中奖"
          },
          {
            value: "2",
            label: "未中奖"
          }
        ],
        value: "宁波天钧伯爵科技有限公司",
        addrules: {},
        addform: {
          merchant_id: "",
          action_introduce: "",
          limit: "",
          day_limit: "",
          end_time: "",
          turntable_name: "",
          write_off_pwd: "",
          detail: [
            {
              name: "",
              ratio: "50",
              is_win: "",
              image: ""
            },
            {
              name: "",
              ratio: "50",
              is_win: "",
              image: ""
            },
            {
              name: "",
              ratio: "50",
              is_win: "",
              image: ""
            },
            {
              name: "",
              ratio: "50",
              is_win: "",
              image: ""
            },
            {
              name: "",
              ratio: "50",
              is_win: "",
              image: ""
            },
            {
              name: "",
              ratio: "50",
              is_win: "",
              image: ""
            }
          ]
        },
        adddialogVisible: false,
        dialogVisible: false,
        total: 0,
        tablelist: [],
        listpage: {
          page: 1,
          per_page: 10,
          actionName: "",
          tmpName: "",
          keyword: "",
          status: "",
          start: "",
          end: ""
        },
        /*是否打开添加弹窗*/
        open_add: false,
        multipleSelection: []
      };
    },
    watch: {
      adddialogVisible: function(a) {
        if (a == false) {
          let arr = {
            merchant_id: "",
            action_introduce: "",
            limit: "",
            day_limit: "",
            end_time: "",
            turntable_name: "",
            write_off_pwd: "",
            detail: [
              {
                name: "",
                ratio: "50",
                is_win: "",
                image: ""
              },
              {
                name: "",
                ratio: "50",
                is_win: "",
                image: ""
              },
              {
                name: "",
                ratio: "50",
                is_win: "",
                image: ""
              },
              {
                name: "",
                ratio: "50",
                is_win: "",
                image: ""
              },
              {
                name: "",
                ratio: "50",
                is_win: "",
                image: ""
              },
              {
                name: "",
                ratio: "50",
                is_win: "",
                image: ""
              }
            ]
          };
          this.ischange = false;
          this.addform = arr;
        }
      }
    },
    created() {
      this.getlist();
    },
    methods: {
      async show_msg(job_id) {
        // let res = await request._get("/shop/video.tmp/getRestByJobId", {
        //   job_id: job_id
        // });
        // if (res.data.error === "成功") {
        //   await this.$confirm("合成成功", "提示", {
        //     confirmButtonText: "确定",
        //     cancelButtonText: "取消",
        //     type: "warning"
        //   });
        // } else {
        //   this.$message.success({ type: "error", message: res.data.message });
        // }
      },
      // 多选
      handleSelectionChange(val) {
        this.multipleSelection = val;
        console.log(this.multipleSelection);
      },
      async check(val,status){
        // let res = await request._post("/shop/video.tmp/check", {
        //   video_id:val,
        //   status:status,
        // });
        // this.getlist();
        // this.$message.success({ type: "error", message: res.msg });
  
      },
      async outputVideo() {
        if (this.multipleSelection.length == 0) {
          this.$message("至少选择一条数据");
          return;
        }
  
        let videoListIds = this.multipleSelection.map(function(item, index) {
          return item.id;
        });
        videoListIds = videoListIds.join(",");
        window.location.href =
          "https://liuliangbenben.rchz.top/shop/video.tmp/bathDownload?videoListIds=" +
          videoListIds;
        return;
      },
  
      async videoListDel() {
        if (this.multipleSelection.length == 0) {
          this.$message("至少选择一条数据");
          return;
        }
  
        let videoListIds = this.multipleSelection.map(function(item, index) {
          return item.id;
        });
        videoListIds = videoListIds.join(",");
  
        let res = await request._post("/shop/video.tmp/videoListDel", {
          videoListIds: videoListIds
        });
        this.$message({
          type: "success",
          message: "删除成功"
        });
        // 刷新页面
        window.location.reload();
        return;
      },
  
      abandon(id) {
        let that = this;
        this.$confirm("此操作将永久删除该记录, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            request
              // ._post("/shop/video.tmp/videoListDel", {
              //   videoListIds: id
              // })
              // .then(res => {
              //   console.log("1111", res);
              //   if (res.code == 1) {
              //     that.$message.success("废弃成功");
              //     that.getlist();
              //   } else {
              //     that.$message.success("操作失败");
              //   }
              // });
          })
          .catch(() => {
            console.log("已取消");
          });
      },
      /*搜索查询*/
      onSubmit() {
        this.listpage.page = 1;
        this.getlist();
      },
  
      // 打开活动详情对话框
      opendetail() {
        this.dialogVisible = true;
      },
      // 获取视频数据列表
      async getlist() {
        // let res = await request._post("/shop/video.tmp/getLIst", this.listpage);
        // console.log("列表", res);
        // if (res.code == 1) {
        //   // res.data.data.forEach(item => {
        //   //   item.username = shop_user.real_name;
        //   // });
        //   this.tablelist = res.data.data;
        //   this.total = res.data.total;
        // }
      },
      // 打开弹出框
      activity(e) {
        console.log("打开弹出框1", e);
        console.log("打开弹出框2", this.tablelist);
        if (e != 1) {
          console.log("没有e", e);
          this.addform = e;
          this.addform.detail;
          this.addform.turntable_id = e.id;
          // 打开弹出框
          this.adddialogVisible = true;
        } else if (e == 1) {
          // 打开弹出框
          this.adddialogVisible = true;
        }
  
        console.log(this.open_add);
      },
      // 关闭添加
      closeAdd(e) {
        console.log(e, "罐体添加属性");
        this.open_add = false;
      },
  
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.listpage.per_page = val;
        this.getlist();
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.listpage.page = val;
        this.getlist();
      },
      /*获取图片*/
      returnImgsFunc(e) {
        if (e != null && e.length > 0) {
          if (this.imgtype == 1) {
            this.addform.detail[0].image = e[0].file_path;
          } else if (this.imgtype == 2) {
            this.addform.detail[1].image = e[0].file_path;
          } else if (this.imgtype == 3) {
            this.addform.detail[2].image = e[0].file_path;
          } else if (this.imgtype == 4) {
            this.addform.detail[3].image = e[0].file_path;
          } else if (this.imgtype == 5) {
            this.addform.detail[4].image = e[0].file_path;
          } else if (this.imgtype == 6) {
            this.addform.detail[5].image = e[0].file_path;
          }
        }
        console.log("获得图片", this.addform.store_logo);
        this.isupload = false;
      },
      openUpload(e) {
        this.type = e;
        console.log("type", e);
        this.isupload = true;
      },
      openUpload(e) {
        this.imgtype = e;
        console.log("type", e);
        this.isupload = true;
      },
      handleChangesss(value) {
        console.log(value);
      }
    }
  };
  </script>
  
  <style lang="scss" scoped>
  .jj {
    input {
      height: 30px !important;
    }
  }
  
  .form-box {
    display: flex;
    flex-direction: column;
  
    .form-box-item1 {
      display: flex;
      flex-direction: column;
  
      .top {
        height: 50px;
        display: flex;
        flex-direction: column;
        justify-content: center;
  
        .top-item1 {
          margin-left: 3%;
          font-size: 20px;
        }
  
        .top-item2 {
          height: 1px;
          background-color: #ababab;
          margin-left: 2.5%;
          width: 95%;
        }
      }
    }
  }
  </style>
  